23.05.11

오늘 한 일

• 알고리즘 문제 풀이 3406b63
• 익스텐션 개발
  • 필터 작동 이슈 fix
  • CI/CD 구축
  • 1.0.1 배포
• nest.js 강의 1~3강 수강

익스텐션 개발

필터가 제대로 동작하지 않은 문제의 원인은 어제 예상했던대로 handleChange의 문제였다.

const FilterDataContext = createContext<Pick<FilterProps, 'value'> | null>(null);
const OpenClosedContext = createContext<{ isOpen: boolean; toggleModal: () => void } | null>(null);

let handleChange: React.Dispatch<React.SetStateAction<valueType>> | undefined;

const Filter = ({ value, maxWidth, onChange, children, hasBorder = true }: FilterProps) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleModal = () => {
    setIsOpen(prev => !prev);
  };

  if (onChange) {
    handleChange = onChange;
  }

  return (
    <OpenClosedContext.Provider value={{ isOpen, toggleModal }}>
      <FilterDataContext.Provider value={{ value }}>
        //...
      </FilterDataContext.Provider>
    </OpenClosedContext.Provider>
  )
}

여러 필터를 눌러 모달을 여러개 띄운다면 handleChange는 마지막 모달의 onChange를 가리키게 된다. 그래서 예상치 못한 동작이 발생했던 것이다.

이를 수정하기 위해 살짝 바꿔보았다.

const FilterDataContext = createContext<Pick<FilterProps, 'value' | 'onChange'> | null>(null);
const OpenClosedContext = createContext<{ isOpen: boolean } | null>(null);

const Filter = ({ value, maxWidth, onChange, children, hasBorder = true }: FilterProps) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <OpenClosedContext.Provider value={{ isOpen }}>
      <FilterDataContext.Provider value={{ value, onChange }}>
        //...
      </FilterDataContext.Provider>
    </OpenClosedContext.Provider>
  );
};

각 필터마다 onChange를 FilterDataContext에 넣어주어 이전의 문제를 해결할 수 있었다.

---

익스텐션 개발 - CI/CD 구축

CI/CD를 구축하기 위해 Github Actions를 사용했다.

name: Publish

on: workflow_dispatch

jobs:
  build:
    name: Publish webextension
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - name: Build
        run: |
          yarn install
          yarn build
      - name: Make zip file
        run: zip -r ./build.zip ./dist
        shell: bash
      - name: Upload & release
        uses: mnao305/chrome-extension-upload@v4.0.1
        with:
          file-path: ./build.zip
          extension-id: 'ogldncimhepjdfadhjjhkchknloncnmg'
          client-id: ${{ secrets.CLIENT_ID }}
          client-secret: ${{ secrets.CLIENT_SECRET }}
          refresh-token: ${{ secrets.REFRESH_TOKEN }}

chrome docs를 참고하여 client-id, client-secret, refresh-token을 발급받았다.

그리고 chrome-extension-upload를 사용하여 배포를 진행했다.

on: workflow_dispatch를 사용하여 수동으로 배포할 수 있도록 했다. Github Actions

포트폴리오 작성

오늘 부스트캠프 온라인 설명회를 들었다. 포트폴리오에 손을 안댄지 오래되어서 리뉴얼해보려고 한다. 자기소개서에 적을 내용도 정리할 겸 마감 전까지 틈틈히 작성하자.

내일 할 일

• 알고리즘 문제 풀이
• 익스텐션 개발
  • 과제 크롤링 로직 변경
    • 과제 뿐만 아니라 동영상, 파일, 공지사항도 크롤링 얘정
    • 그에 맞게 UI 수정
• 학습공동체 과제 제출
• 쿠버네티스 강의 Kubernetes를 통한 클라우드 조정 듣기
• nest.js 강의 4~6강 수강